<template>
    <div class="mform">
        <div class="back">
            <Back>
                <div class="form-btn">
                    <el-button type="primary" @click="save()">保存</el-button>
                </div>
            </Back>
        </div>
        <el-scrollbar style="padding: 10px; height: 100%">
            <el-form ref="formRef" :model="form" :rules="rules" :label-position="'left'" label-width="auto">
                <el-tabs type="card" v-model="activeName">
                    <!-- 基本信息 -->
                    <el-tab-pane label="基本信息" name="base">
                        <div class="form-content">
                            <div class="form-box" style="width: 60%;">

                                <el-form-item label="名称" prop="name">
                                    <el-input v-model="form.name" placeholder="请输入名称" clearable />
                                </el-form-item>
                                <el-form-item label="时效类型" prop="time_type">
                                    <el-radio-group v-model="form.time_type">
                                        <el-radio value="1" border>静态时效</el-radio>
                                        <el-radio value="2" border>动态时效</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="起止时间" prop="time" v-if="form.time_type == 1">
                                    <el-date-picker v-model="form.time" type="datetimerange" range-separator="至"
                                        start-placeholder="开始时间" end-placeholder="结束时间"
                                        value-format="YYYY-MM-DD HH:mm:ss" @change="getTable" />
                                </el-form-item>
                                <el-form-item label="自领取后有效天数" prop="effect_day" v-if="form.time_type == 2">
                                    <el-input v-model="form.effect_day" placeholder="请输入名称" clearable type="number" />
                                </el-form-item>
                                <el-form-item label="类型" prop="type">
                                    <el-radio-group v-model="form.type">
                                        <el-radio value="1" border>现金券</el-radio>
                                        <el-radio value="2" border>折扣券</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="面额/折扣" prop="denomination">
                                    <el-input v-model="form.denomination" placeholder="请输入面额/折扣" clearable />
                                </el-form-item>
                                <el-form-item label="门槛（元）" prop="threshold">
                                    <el-input v-model="form.threshold" placeholder="请输入门槛（元）" clearable />
                                </el-form-item>
                                <el-form-item label="发放数量" prop="count">
                                    <el-input v-model="form.count" placeholder="请输入发放数量" clearable />
                                </el-form-item>
                                <el-form-item label="状态" prop="state">
                                    <el-radio-group v-model="form.state">
                                        <el-radio value="1" border>启用</el-radio>
                                        <el-radio value="2" border>禁用</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="排序" prop="sort">
                                    <el-input v-model="form.sort" placeholder="请输入排序" clearable />
                                </el-form-item>

                                <el-form-item label="简短描述" prop="desc">
                                    <el-input v-model="form.desc" :rows="5" type="textarea" placeholder="请输入简短描述"
                                        clearable />
                                </el-form-item>

                                <el-form-item label="使用说明" prop="data">
                                    <Editor v-model="form.data" v-if="editorVisible" />
                                </el-form-item>
                            </div>
                        </div>
                    </el-tab-pane>
                    <!-- 活动商品 -->
                    <el-tab-pane label="活动商品" name="goods">
                        <div class="form-box" style="width: 60%;">
                            <el-form-item label="使用范围" prop="range">
                                <el-checkbox-group v-model="form.range" @change="changeRange">
                                    <el-checkbox value="1" border>商品</el-checkbox>
                                    <!-- <el-checkbox :value="2" border>品牌</el-checkbox> -->
                                    <el-checkbox value="3" border>分类</el-checkbox>
                                    <el-checkbox value="4" border>全场</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>

                            <el-form-item v-if="form.range.includes('1')" label="商品ID" prop="include_barcode">
                                <el-input v-model="form.goods" type="textarea" :autosize="{ minRows: 7, maxRows: 9 }"
                                    placeholder="请输入参与该活动的商品ID,多个以逗号隔开" />
                                <el-button type="danger" size="small" @click="clearBarcode">清空</el-button>
                            </el-form-item>
                            <!-- <el-form-item v-if="form.range.includes(2)" label="品牌" prop="brands">
                                <el-select v-model="form.brands" filterable multiple placeholder="请选择" clearable>
                                    <el-option v-for="item in brandList" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-form-item> -->
                            <el-form-item v-if="form.range.includes('3')" label="分类" prop="cates">
                                <el-tree-select v-model="form.cates" :data="cateList" multiple show-checkbox
                                    style="width: 240px" placeholder="请选择分类" clearable filterable />
                            </el-form-item>

                            <el-form-item label="剔除范围" prop="ex_range">
                                <el-checkbox-group v-model="form.ex_range">
                                    <el-checkbox value="1" border>商品</el-checkbox>
                                    <!-- <el-checkbox :value="2" border>品牌</el-checkbox> -->
                                    <el-checkbox value="3" border>分类</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>

                            <el-form-item v-if="form.ex_range.includes('1')" label="商品ID" prop="include_barcode">
                                <el-input v-model="form.ex_goods" type="textarea" :autosize="{ minRows: 7, maxRows: 9 }"
                                    placeholder="请输入参与该活动的商品ID,多个以逗号隔开" />
                                <el-button type="danger" size="small" @click="clearBarcode">清空</el-button>
                            </el-form-item>
                            <!-- <el-form-item v-if="form.ex_range.includes(2)" label="品牌" prop="brands">
                                <el-select v-model="form.ex_brands" filterable multiple placeholder="请选择" clearable>
                                    <el-option v-for="item in brandList" :key="item.id" :label="item.name"
                                        :value="item.id" />
                                </el-select>
                            </el-form-item> -->
                            <el-form-item v-if="form.ex_range.includes('3')" label="分类" prop="cates">
                                <el-tree-select v-model="form.ex_cates" :data="cateList" multiple show-checkbox
                                    style="width: 240px" placeholder="请选择分类" clearable filterable />
                            </el-form-item>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-form>
        </el-scrollbar>
    </div>
</template>
<script setup name="CouponEdit">

const { proxy } = getCurrentInstance()

const activeName = ref('base');

const editorVisible = ref(false);
const formRef = ref();
const form = reactive({ id: '', name: '', time_type: '1', type: '1', time: [], denomination: '', threshold: '', count: '', range: ['1'], state: '1', sort: 0, desc: '', data: '', goods: '',  cates: [], ex_range: ['1'], ex_goods: [], ex_cates: [] });
//验证规则
const rules = {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
    time_type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
    time: [{ required: true, message: '请选择开始结束时间', trigger: 'blur' }],
    effect_day: [{ required: true, message: '请输入有效天数', trigger: 'blur' }],
    denomination: [{ required: true, message: '请输入面额/折扣', trigger: 'blur' }],
    threshold: [{ required: true, message: '请输入门槛（元）', trigger: 'blur' }],
    count: [{ required: true, message: '请输入发放数量', trigger: 'blur' }],
    range: [{ required: true, message: '请选择使用范围', trigger: 'blur' }],
    state: [{ required: true, message: '请选择状态', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
    desc: [{ required: true, message: '请输入简短描述', trigger: 'blur' }],
};
//保存
async function save() {
    formRef.value.validate(async (valid) => {
        if (valid) {

            let res = await proxy.$post('ActiveCouponSave', form)
            if (res.code === 0) {
                ElMessage({ type: 'success', message: '保存成功' });

                if (res.data.id) {
                    proxy.$bus.emit('tabSwitch', { key: 'couponEdit', query: { id: res.data.id, tab: 'base' } });
                } else if (form.id) {
                    // window.location.reload();
                    await getDetail(form.id)
                    emit('afterSave', { tab: 'base' });
                } else {
                    proxy.$bus.emit('back');
                }
            }
        }
    });
}

onMounted(() => {
    getOptions()
    // 编辑
    let id = proxy.$route.query.id || null;
    if (id) {
        getDetail(id)
    }
    editorVisible.value = true
});

async function getDetail(id) {
    let res = await proxy.$post('ActiveCouponDetail', {
        id
    }, false)
    if (res.code === 0) {
        Object.assign(form, res.data);
        // emit('init', res.data);
    }
}

// 品牌列表
const brandList = ref([])
// 分类列表
const cateList = ref([])
async function getOptions() {
    let res = await proxy.$post('OptionsList', { keys: ['cateTrees'] }, false)
    if (res.code === 0) {
        cateList.value = res.data.cateTrees || []
        // brandList.value = res.data.brands || []
    }
}

function changeRange(e) {
    let last = form.range[form.range.length-1]
    if(last == 4) {
        // 点击全场
        form.range = ['4']
    } else {
        let i = form.range.indexOf(4)
        if(i>-1) {
            form.range.splice(i,1)
        }
    }
}

</script>
<style scoped lang="scss">
.el-tabs {
    height: 100%;
}

::v-deep .el-tabs__content {
    height: calc(100% - 70px);
}

.el-tab-pane {
    height: 100%;
}
</style>